<template>
  <el-switch 
    v-model="globalStore.isDark" 
    @change="handleSwitchDark" 
    inline-prompt 
    :active-icon="Sunny" 
    :inactive-icon="Moon" 
  />
</template>

<script setup lang="ts" name="SwitchDark">
import { useTheme } from "../../hooks/useTheme";
import { useGlobalStore } from "../../store/modules/global";
import { Sunny, Moon } from "@element-plus/icons-vue";

const { switchDark } = useTheme();
const globalStore = useGlobalStore();

const handleSwitchDark = () => {
  console.log('SwitchDark: 切换暗黑模式，当前值:', globalStore.isDark);
  switchDark();
};
</script>

<script lang="ts">
export default {
  name: 'SwitchDark'
};
</script>
